<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>签核系统-单据签核</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="icon" href="/febs/images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="/febs/vue/element-ui-index.css" />
  <script src="/febs/vue/vue.js"></script>
  <script src="/febs/vue/axios.min.js"></script>
  <script src="/febs/vue/element-ui-index.js"></script>
  <script src="/febs/vue/jquery.js"></script>
  <script src="/febs/vue/xe-utils.js"></script>
  <link rel="stylesheet" href="/febs/vue/vxe-table-style.css">
  <script src="/febs/vue/vxe-table.js"></script>
</head>
<body>
<div id="app" class="layui-fluid w-app">
  <div v-if="this.tableData.length > 0 ">
    <vxe-table border show-header-overflow highlight-hover-row resizable  :data="tableData" max-height="450">
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="vendNm" title="厂商" min-width="120"></vxe-table-column>
      <vxe-table-column field="itemNo" min-width="120" title="材料编码"></vxe-table-column>
      <vxe-table-column field="itemTname" title="材料名称" min-width="260"></vxe-table-column>
      <vxe-table-column field="seId" min-width="100" title="订单号码"></vxe-table-column>
      <vxe-table-column field="seSeq" min-width="50" title="-序"></vxe-table-column>
      <vxe-table-column field="prodNo" min-width="100" title="型号"></vxe-table-column>
      <vxe-table-column field="seQty" min-width="80" title="订单双数"></vxe-table-column>
      <vxe-table-column field="needQty" min-width="80" title="需求数量"></vxe-table-column>
      <vxe-table-column field="countPurQty" min-width="80" title="累计采购"></vxe-table-column>
      <vxe-table-column field="ordQty" min-width="80" title="采购数量"></vxe-table-column>
      <vxe-table-column field="chkQty" min-width="80" title="验收采购"></vxe-table-column>
      <vxe-table-column field="moreQTY" min-width="80" title="多购数量" type="html" :formatter="formatMoreQTY"></vxe-table-column>
      <vxe-table-column field="purUnit" min-width="80" title="采购单位"></vxe-table-column>
    </vxe-table>
  </div>
  <div v-else style="color: #ed6a0c;
    font-size: 16px;
    border: 1px solid #ed6a0c;padding: 15px 15px;">多购数量 列表为空</div>
  <div class="form-content">
    <el-form ref="form"   :model="form" label-width="120px" class="remark-input">
      <el-row :gutter="20">
        <el-col :span="12">
      <el-form-item label="单据类别">
        <el-input v-model="parameterData.billstdNm" :disabled="true"></el-input>
      </el-form-item>
        </el-col> <el-col :span="12">
      <el-form-item label="单据编号">
        <el-input v-model="parameterData.orderNo" :disabled="true"></el-input>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
      <el-form-item label="组织机构">
        <el-input v-model="parameterData.orgName" :disabled="true"></el-input>
      </el-form-item>
        </el-col> <el-col :span="12">
      <el-form-item label="签核角色">
        <el-input v-model="parameterData.flowDesc" :disabled="true"></el-input>
      </el-form-item>
      </el-col>
      </el-row>
      <el-form-item label="批注">
        <el-select
                class="remark-select"
                filterable
                allow-create
                v-model="parameterData.chkOk"
                placeholder="请选择或输入自定义批注"
                :popper-append-to-body="false"
                style="width: 100%"
                :filter-method="filterMethod"
        >
          <el-option v-for="item in this.defaultRemarkList" :value="item"> </el-option>
        </el-select>
        <div class="max-length">{{ valueLenght }}/15</div>
        <div class="note">（可自定义）</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">签核</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        tableData: [],
        form: {},
        typeInput: "单据类别",
        parameterData: JSON.parse(sessionStorage.parameterData),
        defaultRemarkList: ["同意"],
      };
    },
    computed: {
      valueLenght() {
        return this.parameterData.chkOk.length;
      },
    },
    created() {
      this.detailTable()
      if (this.parameterData.chkOk == null) {
        this.parameterData.chkOk = "同意";
      }
    },
    mounted() {
      const input = document.querySelector(".remark-select .el-input input");
      document.querySelector(".remark-select .el-input input").setAttribute("maxlength", 15);
      input.addEventListener("onchange", (e) => {
        console.log(e);
    });
    },
    methods: {
      detailTable(){
        axios.get('/approvals/detail', {
          params: {
            orderNo: JSON.parse(sessionStorage.parameterData).orderNo,
            orgId: JSON.parse(sessionStorage.parameterData).orgId
          }
        })
                .then(response => {
          this.tableData = response.data.data
        })
      .catch(error => {
          console.log(error);
      })
      },
      onSubmit() {
        axios
                .post("approvals/sign", this.parameterData)
                .then((response) => {
          $("#febs-approvals").find("#query").trigger("click");
        // window.close();
        layer.closeAll();
      })
      .catch((error) => {
          console.log(error);
      });
      },
      onCancel() {
        layer.closeAll();
      },
      filterMethod(query) {
        this.parameterData.chkOk = query;
        if (query) {
          return this.defaultRemarkList.filter(function (item) {
            return item.includes(query);
          });
        }
        return this.defaultRemarkList;
      },
      formatMoreQTY({ cellValue }) {
        if(cellValue > 0) {
          return `<span  style="color: #fa541c;">${cellValue}</span>`
        }
        else {
          return `<span>${cellValue}</span>`
        }
      },
    },
  });
</script>

<style>
  .w-app {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    padding: 0px 15px 15px 15px;
    background: #ffffff !important;
    position: relative;
  }
  .remark-input {
    position: relative;
    margin-left: 0;
  }
  .max-length {
    position: absolute;
    top: 0;
    right: -10px;
    width: 80px;
    text-align: center;
  }
  .note {
    position: absolute;
    top: 30px;
    left: 10px;
    font-size: 8px;
    color: green;
  }
  .form-content{width:750px;margin:0 auto;margin-top: 15px;}
  .layui-layer.layui-layer-page. layui-layer-admin-page{top:0px!important;}
</style>
</html>
